<section>
  <!-- main content start-->
  <div class="main-content">
    <form [formGroup]="vehicleForm" id="documentForm"  class="form-horizontal">

    <div class="panel-body" style="margin-bottom: -15px;">
        <span>
          <i class="fa fa-2x fa-save" (click)="onSubmit(vehicleForm.value)"></i>
        </span>
    </div>
    <!--body wrapper start-->
    <div class="wrapper">
      <nz-table #nzTable
                [nzBordered]="true"
                [nzAjaxData]="_dataSet"
                [nzShowSizeChanger]="true"
                [nzTotal]="_total"
                [(nzPageIndex)]="_current"
                (nzPageIndexChange)="refreshData()"
                [(nzPageSize)]="_pageSize"
                (nzPageSizeChange)="refreshData(true)"
                (nzDataChange)="_displayDataChange($event)"
                [nzScroll]="{ y: 270 }">
        <ng-template #nzFixedHeader>
          <thead nz-thead  >
          <tr>
            <th class="table-header" nz-th [nzCheckbox]="true" [nzWidth]="'5%'" >
              序号
            </th>
            <th class="table-header" nz-th [nzWidth]="'14%'">
              <span>用车申请单号</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'8%'">
              <span>是否同意拼车</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'8%'">
              <span>申请人姓名</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'13%'">
              <span>开始时间</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'13%'">
              <span>预计结束时间</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'10%'">
              <span>出发地</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'10%'">
              <span>目的地</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'5%'">
              <span>同乘人数</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'7%'">
              <span>车辆名称</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'7%'">
              <span>车牌号</span>
            </th>
          </tr>
          </thead>
        </ng-template>
        <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td [nzCheckbox]="true">
            <label *ngIf="data.chkIsExist" nz-checkbox [(ngModel)]="data.checked"
                   (ngModelChange)="_refreshStatus($event,data.processsn)" name="{{data.oid}}"
                   [ngModelOptions]="{standalone: true}">
            </label>
          </td>
          <td nz-td>{{data.processsn}}</td>
          <td nz-td style="text-align: center">{{data.sharedname}}</td>
          <td nz-td>{{data.applicant.split("_")[1]}}</td>
          <td nz-td>{{data.starttime}}</td>
          <td nz-td>{{data.endtime}}</td>
          <td nz-td>{{data.startpoint}}</td>
          <td nz-td>{{data.endpoint}}</td>
          <td nz-td>{{data.passengerNum}}</td>
          <td nz-td>{{data.vehicleObj?.name}}</td>
          <td nz-td>{{data.vehicleObj?.licenseNumber}}</td>
        </tr>
        </tbody>
      </nz-table>
      <div class="row" style="margin-top: 30px;">
        <div class="col-lg-12">
          <section class="panel">
            <header class="panel-heading">
              车辆信息
            </header>

            <div class="panel-body">


              <div class="col-lg-6">
                <div class="form-group">
                  <label for="name"><span class="necessary">*</span>&nbsp;车辆</label>
                  <div class="input-group  ">
                    <input formControlName="oid" class="form-control" type="hidden" id="oid" />
                    <input readonly formControlName="name" class="form-control" type="text" id="name" />
                    <span class="input-group-btn" >
                            <button id="btn_select_vehicle" type="button" class="btn btn-default" style="background: #424F63;color: #fff;" (click)="btn_select_vehicle()" >
                                <i class="fa fa-angle-down"></i>
                            </button>
                    </span>
                  </div>
                </div>
                <div class="form-group">
                  <label for="name">车辆类别</label>
                  <input formControlName="vehicleType" class="form-control" type="hidden" id="vehicleType" />
                  <input readonly formControlName="vehicleTypeName" class="form-control" type="text" id="vehicleTypeName" />
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group" >
                  <label for="name">车牌号</label>
                  <input readonly formControlName="licenseNumber" id="licenseNumber" type="text" class="form-control" >
                </div>
                <div class="form-group">
                  <label for="name">额定载客数</label>
                  <input readonly formControlName="passengerCapacity" id="passengerCapacity" type="text" class="form-control">
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group">
                  <label for="name"><span class="necessary">*</span>&nbsp;司机姓名</label>
                  <div class="input-group  ">
                    <input formControlName="driver" class="form-control" type="hidden" id="driver" />
                    <input readonly formControlName="driverName" class="form-control" type="text" id="driverName" />
                    <span class="input-group-btn" >
                        <button id="btn_select_driver" type="button" class="btn btn-default" style="background: #424F63;color: #fff;" (click)="btn_select_driver()" >
                            <i class="fa fa-angle-down"></i>
                        </button>
                    </span>
                  </div>

                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group" >
                  <label for="name">司机电话</label>
                  <input readonly formControlName="driverPhone" id="driverPhone" type="text" class="form-control">
                </div>

              </div>


              <div class="panel-body">
                <div class=" ">
                  <div class="pull-right" style=" margin-top: 30px;">
                    <button class="btn btn-primary" type="submit" [disabled]="_disabledButtonEdit" (click)="_operateDataEdit()">修改</button>
                    <button class="btn btn-default" type="button" (click)="_operateDataAdd()">新增</button>
                    <button class="btn btn-default" type="button" [disabled]="_disabledButton" (click)="_operateDataDel()">删除</button>
                  </div>
                </div>
              </div>

            </div>
          </section>
        </div>
      </div>



      <!--<div class="panel-body">-->
        <nz-table #vehicleTable
                  [nzBordered]="true"
                  [nzDataSource]="vehicleDataSet"
                  [nzPageSize]="10"
                  (nzDataChange)="vehicleDisplayDataChange($event)"
                  (nzPageIndexChange)="vehicleRefreshData()"
                  (nzPageSizeChange)="vehicleRefreshData()"
                  [nzIsPagination]="false">
          <thead nz-thead>
          <tr>
            <th class="table-header" nz-th [nzWidth]="'10%'">
              <span>车牌号</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'15%'">
              <span>车辆名称</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'10%'">
              <span>车牌类别</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'10%'">
              <span>额定载客数</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'15%'">
              <span>司机姓名</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'15%'">
              <span>司机电话</span>
            </th>
            <th class="table-header" nz-th [nzWidth]="'25%'">
              <span>用车申请单号</span>
            </th>
          </tr>
          </thead>
          <tbody nz-tbody>
          <tr nz-tbody-tr *ngFor="let data of vehicleTable.data" (click)="onSelect(data)" [class.selected]="data === selected">
            <td nz-td>{{data.licenseNumber}}</td>
            <td nz-td>{{data.name}}</td>
            <td nz-td>{{data.vehicleTypeName}}</td>
            <td nz-td>{{data.passengerCapacity}}</td>
            <td nz-td>{{data.driverName}}</td>
            <td nz-td>{{data.driverPhone}}</td>
            <td nz-td>{{data.processsns}}</td>
          </tr>
          </tbody>
        </nz-table>
      <!--</div>-->
<!--body wrapper end-->



</div>
<!-- main content end-->
    </form>
  </div>
</section>

<!-- 司机开窗modal -->
<nz-modal id="udgModal"  [nzVisible]="driverIsVisible" [nzTitle]="'人员开窗'" [nzContent]="driverModalContent"
          [nzFooter]="false" (nzOnCancel)="driverHandleCancel($event)" >
  <ng-template #driverModalContent>
    <app-driver-table></app-driver-table>
  </ng-template>
</nz-modal>
<!-- modal -->

<!-- 车辆开窗modal -->
<nz-modal id="vehicleModal"  [nzVisible]="vehicleIsVisible" [nzTitle]="'车辆开窗'" [nzContent]="vehicleModalContent"
          [nzFooter]="false" (nzOnCancel)="vehicleHandleCancel($event)" >
  <ng-template #vehicleModalContent>
    <app-vehicle-table></app-vehicle-table>
  </ng-template>
</nz-modal>
<!-- modal -->
